<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>指纹库</title>
  <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__PUBLIC__/style/template.css" media="all">
</head>
<body>
  <div style="margin:30px;">
    <div class="layui-form">
      <div class="layui-form-item">
        <div class="layui-input-inline">
          <input type="text" name="keyword" placeholder="搜索应用指纹" class="layui-input">
        </div>
        <div class="layui-input-inline">
          <button class="layui-btn" lay-submit lay-filter="search-submit"><i class="layui-icon">&#xe615;</i> </button>
        </div>
      </div>
    </div>
    <hr class="layui-bg-orange">
    <table id="finger_tb" lay-filter="finger_tb"></table>
  </div>

  <script type="text/html" id="nameTpl">
    <a href="#" class="layui-table-link" onclick="finger_detail('{{d.id}}')">{{d.app_name}}</a>
  </script>

  <script type="text/html" id="methodTpl">
    {{#  if(d.method == 1){ }}
      GET
    {{#  } else { }}
      POST
    {{#  } }}
  </script>

  <script type="text/html" id="actionTpl">
    <a href="#" class="layui-table-link" onclick="del_finger('{{d.id}}')">删除</a>
  </script>
  
  <script src="__PUBLIC__/layui/layui.js"></script>  
  <script>
    var currPage = 1;
    layui.use(['form', 'table'], function(){
        var table = layui.table
        ,form = layui.form
        ,$ = layui.$;

        // 动态表格
        var tableIns = table.render({
          elem: '#finger_tb'
          ,limit: 20
          ,url: '/Home/Ajax/ajax_list_finger'
          ,page: true
          ,cols: [[
            {field: 'id', title: 'ID', width:80}
            ,{field: 'app_name', title: '应用名称', width:200, templet: '#nameTpl'}
            ,{field: 'app_version', title: '应用版本', width:160}
            ,{field: 'method', title: '请求方式', width:100, templet: '#methodTpl'} 
            ,{field: 'uri', title: '请求路径', width: 260}
            ,{field: 'signature', title: '匹配特征'}
            ,{field: '', title: '操作', width: 80, templet: '#actionTpl'}
          ]]
          ,done: function(res, curr, count){
            currPage = curr;
          }
        });
        
        // 搜索指纹
        form.on('submit(search-submit)', function(obj){
          console.log(obj.field);
          // 动态表格
          var tableIns = table.render({
            elem: '#finger_tb'
            ,limit: 20
            ,url: '/Home/Ajax/ajax_list_finger'
            ,where: obj.field
            ,page: true
            ,cols: [[
              {field: 'id', title: 'ID', width:80}
              ,{field: 'app_name', title: '应用名称', width:200, templet: '#nameTpl'}
              ,{field: 'app_version', title: '应用版本', width:160}
              ,{field: 'method', title: '请求方式', width:100, templet: '#methodTpl'} 
              ,{field: 'uri', title: '请求路径', width: 260}
              ,{field: 'signature', title: '匹配特征'}
              ,{field: '', title: '操作', width: 80, templet: '#actionTpl'}
            ]]
            ,done: function(res, curr, count){
              currPage = curr;
            }
          });
        });
    });
    function del_finger(id){
      layui.$.post("/Home/Ajax/ajax_del_finger" , JSON.stringify({"id":id}) ,function(d){
        layer.msg(d.msg);
        if(d.error == 0){
          layui.table.reload('finger_tb', {
              url: '/Home/Ajax/ajax_list_finger',
              page: {
                curr: currPage
              }
          });
        }
      },"json");
    }
    function finger_detail(id){
      event.preventDefault(); // 阻止默认行为
      layer.open({
        type: 2,
        area: ['80%', '90%'],
        fixed: false,
        maxmin: true,
        title: '指纹详情',
        content: '/Home/Index/finger_detail?id='+id
      });
    }
  </script>
</body>
</html>
